<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">背景</block> 
			<block slot="right"><view style="margin-right: 40upx ;"  @click="addWords" class="cuIcon-writefill lg"></view></block> 
			 
		</cu-custom>
	
	<view class="bg-white padding">
		<view class="cu-steps">
			<view class="cu-item" :class="index>num?'':'text-blue'" v-for="(item,index) in numList" :key="index">
				<text class="num" :class="index==2?'err':''" :data-index="index + 1"></text> {{item.name}}
			</view>
		</view>
	</view>
		<view class="grid col-2 padding-sm">
			
			<view
				v-for="(item, index) in wordList" :key="index"
				class="guess-item"
				@click="navToDetailPage(index)"
			>
			<view class="padding-sm">
				<view class="bg-gradual-red padding radius text-center shadow-blur" v-if="index%6==0">
					<view class="text-lg">{{item.name}}</view>
					<view class="margin-top-sm text-Abc">{{item.explain}}</view>
				</view>
				<view class="bg-gradual-orange padding radius text-center shadow-blur" v-if="index%6==1">
					<view class="text-lg">{{item.name}}</view>
					<view class="margin-top-sm text-Abc">{{item.explain}}</view>
				</view>
				<view class="bg-gradual-green padding radius text-center shadow-blur" v-if="index%6==2">
					<view class="text-lg">{{item.name}}</view>
					<view class="margin-top-sm text-Abc">{{item.explain}}</view>
				</view>
				<view class="bg-gradual-blue padding radius text-center shadow-blur" v-if="index%6==3">
					<view class="text-lg">{{item.name}}</view>
					<view class="margin-top-sm text-Abc">{{item.explain}}</view>
				</view>
				<view class="bg-gradual-purple padding radius text-center shadow-blur" v-if="index%6==4">
					<view class="text-lg">{{item.name}}</view>
					<view class="margin-top-sm text-Abc">{{item.explain}}</view>
				</view>
				<view class="bg-gradual-pink padding radius text-center shadow-blur" v-if="index%6==5">
					<view class="text-lg">{{item.name}}</view>
					<view class="margin-top-sm text-Abc">{{item.explain}}</view>
				</view>
				
			</view>
			
		  </view>
			
			<!--
			
			<view class="padding-sm">
				<view class="bg-gradual-orange padding radius text-center shadow-blur">
					<view class="text-lg">鎏金</view>
					<view class="margin-top-sm text-Abc">#ff9700 - #ed1c24</view>
				</view>
			</view>
			<view class="padding-sm">
				<view class="bg-gradual-green padding radius text-center shadow-blur">
					<view class="text-lg">翠柳</view>
					<view class="margin-top-sm text-Abc">#39b54a - #8dc63f</view>
				</view>
			</view>
			<view class="padding-sm">
				<view class="bg-gradual-blue padding radius text-center shadow-blur">
					<view class="text-lg">靛青</view>
					<view class="margin-top-sm text-Abc">#0081ff - #1cbbb4</view>
				</view>
			</view>
			<view class="padding-sm">
				<view class="bg-gradual-purple padding radius text-center shadow-blur">
					<view class="text-lg">惑紫</view>
					<view class="margin-top-sm text-Abc">#9000ff - #5e00ff</view>
				</view>
			</view>
			<view class="padding-sm">
				<view class="bg-gradual-pink padding radius text-center shadow-blur">
					<view class="text-lg">霞彩</view>
					<view class="margin-top-sm text-Abc">#ec008c - #6739b6</view>
				</view>
			</view>
			-->
			
			
			
		</view>
		 
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ColorList: this.ColorList,
				cid:0,
				numList: [{
					name: '阅读'
				}, {
					name: '游戏'
				}, {
					name: '默写'
				}, {
					name: '完成'
				}, ],
				num: 0,
				scroll: 0,
				wordList:[]
			};
		},
		onLoad(options) {
			
			this.cid = options.cid;
			//console.log(">>>"+this.cid);
			this.loadData();
			
		},
		methods: {
			loadData() {
						//获取数据
						uni.request({
						    url: this.urlDataAsync+ "word/get/"+this.cid, //仅为示例，并非真实接口地址。
						    data: {},
							header: {
							          'content-type': 'application/json', // 微信默认就是
							        },
							success: (res) =>  {
								
							   //console.log(">>>>"+JSON.stringify(res.data));
							  
							   if(res.data.result.count>0){
								   this.wordList=res.data.result.list;
							   }
								
								
							//	console.log(JSON.stringify(this.wordList));
									
							    }
						});
						
			},
			navToDetailPage(index){
				let wid=index;
				
				uni.navigateTo({
					url: `/pages/home/wordsshow?wid=${wid}&cid=${this.cid}`
				})
			},
			addWords(){
			
			  console.log(">>>>>>");	
				
			}
		}
	}
</script>

<style>

</style>
